<!--  -->
<template>
  <div class="home">
    <!--1.  顶部区域布局---------- -->
    <div class="header">
      <div class="item">
        总销售额
        <div class="num">{{ homeData.saleTotal | num }}</div>
        <div class="bottom">今日销售额：{{ homeData.sale }}</div>
      </div>
      <div class="item">
        访问量
        <div class="num">{{ homeData.saleTotal }}</div>
        <div class="bottom">{{ homeData.saleTotal }}</div>
      </div>
      <div class="item">
        访问量
        <div class="num">{{ homeData.saleTotal }}</div>
        <div class="bottom">{{ homeData.saleTotal }}</div>
      </div>
      <div class="item">
        支付量
        <div class="num">{{ homeData.saleTotal }}</div>
        <div class="bottom">今日支付量：{{ homeData.saleTotal }}</div>
      </div>
    </div>

    <!--2. 访问数据统计 ----------------->
    <div class="content">
      <div class="time-info" id="box13">
        <div class="title">月销售额</div>
        <div id="charts" style="width: 100%; height: 300px"></div>
      </div>
      <div class="area" id="box1">
        <div class="title">月销售额</div>
        <div id="pie" style="width: 100%; height: 300px"></div>
      </div>
    </div>

    <!-- 3.  -->
    <!-- 最新内容 -->
    <div class="home-footer">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>今日订单</span>
        </div>
        <div class="text item">
          <el-row>
            <el-col :span="8">
              <div>111</div>
            </el-col>
            <el-col :span="8">
              <div>222</div>
            </el-col>
            <el-col :span="8">
              <div>333</div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>本月订单</span>
        </div>
        <div class="text item">
          <el-row>
            <el-col :span="8">
              <div>111</div>
            </el-col>
            <el-col :span="8">
              <div>222</div>
            </el-col>
            <el-col :span="8">
              <div>333</div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>快捷入口</span>
        </div>
        <div class="text item">
          <el-button type="primary">产品管理</el-button>
          <el-button>消息管理</el-button>
          <el-button>内容管理</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    this.totalInfo();
    this.userId = this.$route.params.id;
    console.log("User ID:", this.userId);
  },

  mounted() {
    //最早获取DOM元素的生命周期函数,挂载完毕，created 获取不到
    this.initMonthSale();
    this.initPie();
  },
  data() {
    return {
      homeData: {},
    };
  },
  methods: {
    async totalInfo() {
      console.log(1121);
      console.log(this.$api);
      let res = await this.$api.totalInfo();
      this.homeData = res.data.data;
      console.log(res, "首页统计信息----");

      var val = 123123;
    },
    async orderData() {},

    initMonthSale() {
      let dom = document.getElementById("charts");
      var myChart = this.$echarts.init(dom);
      // 绘制图表
      myChart.setOption({
        title: {
          text: "ECharts 入门示例",
          show: false,
        },
        tooltip: {
          trigger: "axis",
          // 自定义弹框
          // formatter:'{a}-{b}-{c}'
        },
        xAxis: {
          //x轴数据
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
          //修改x轴线数据
          axisLine: {
            lineStyle: {
              color: "skyblue",
            },
          },
        },
        //y轴会自动创建数据
        yAxis: {},
        series: [
          //折线图
          {
            name: "销量",
            type: "line", //bar 柱状图  line 折线图  pie 饼图  map 地图
            data: [5, 20, 36, 10, 10, 20],
            label: {
              show: true,
            },
          },
          //柱状图
          {
            name: "销售额",
            type: "bar", //bar 柱状图  line 折线图  pie 饼图  map 地图
            data: [5, 20, 36, 10, 10, 20],
            label: {
              show: true,
            },
          },
        ],
      });
    },

    initPie() {
      var chartDom = document.getElementById("pie");
      var myChart = this.$echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "Referer of a Website",
          subtext: "Fake Data",
          left: "center",
          show: false,
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "产品销售",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" },
            ],

            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
  //过滤器--处理数据格式
  //过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。
  //过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
  filters: {
    num(value) {
      if (!value) return;
      // 金额数字
      return value.toLocaleString();
    },
  },
};
</script>
<style scoped>
/* .home {
  margin: 10px;
} */
.header {
  display: flex;
  padding-right: 30px;
  .item {
    flex: 1;
    height: 100px;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    margin-left: 20px;
    margin-right: 20px;
    font-weight: bold;
    color: #fff;
    /* text-align: center; */
    position: relative;
    .num {
      font-size: 22px;
      margin: 10px;
      color: #fff;
    }
    .bottom {
      position: absolute;
      border-top: 1px solid rgb(246, 245, 245);
      padding: 10px 20px;
      bottom: 0;
      right: 0;
      left: 0;
      color: #fff;
      font-weight: normal;
    }
  }
  .item:nth-child(1) {
    background-image: linear-gradient(#df887d, #88554d);
  }
  .item:nth-child(2) {
    background-image: linear-gradient(#409eff, #2e556e);
  }
  .item:nth-child(3) {
    background-image: linear-gradient(#b54fa8, #713c7a);
  }
  .item:nth-child(4) {
    background-image: linear-gradient(#1cd2f1, #39717a);
  }
}

/* // 图表 */

.content {
  margin: 20px;
  display: flex;
  height: 320px;
  .time-info {
    flex: 2;
    background: #fff;
    margin-right: 20px;
    padding: 10px;
  }

  .area {
    flex: 1;
    background: #fff;
    padding: 10px;
  }
}

.home-footer {
  display: flex;
  padding-left: 20px;
  margin-bottom: 20px;
  .box-card {
    flex: 1;
    margin-right: 30px;
    span {
      font-weight: 600;
    }
  }
}
</style>
